<template>
    <div>
        <ContentHead title="服务器列表" content="服务器管理与权限管理" ref="contentHead"></ContentHead>
        <div class="server-content">
            <Tabs style="margin-top: 8px">
                <TabPane label="All">
                    <ServerList :server-list="serverList"></ServerList>
                </TabPane>
                <TabPane label="测试">
                    <ServerList :server-list="serverList" filter="test"></ServerList>
                </TabPane>
                <TabPane label="正式">
                    <ServerList :server-list="serverList" filter="prod"></ServerList>
                </TabPane>
                <div slot="extra">
                    <Button type="primary" @click="addServer">add server</Button>
                </div>
            </Tabs>
        </div>
    </div>
</template>

<script>
    import ServerList from './ServerList';
    export default {
        data(){
            return {
                serverList: []
            }
        },
        created(){
            this.searchMachine();
        },
        components:{
            ServerList
        },
        methods:{
            searchMachine(){
              this.$axios.post('/mdo/api/v1/appMachine/page', {
                  filters:[{
                      field: 'createdBy',
                      operator: 'EQ',
                      value: this.userInfo.username
                  }],
                  orders:[{
                      field: 'createdAt',
                      orderType: 'DESC'
                  }]
              }).then(res=>{
                  this.serverList = res.data.list;
              })
            },
            addServer(){
                this.$router.push({path: '/server/create'});
            }
        }
    }
</script>

<style lang="less" scoped>
    .server-content{
        width: 1024px;
        margin: 0 auto;
    }
</style>